<template>
    <el-row>
      <el-text style="font-size: 20px">7天运动数据查询</el-text>
    </el-row>
  <el-divider></el-divider>
  <el-row>
      <el-input v-model="form.uuid" style="width: 180px;margin-left: 30px"  placeholder="请输入uid"  size="small"  />
      <el-button style="margin-left: 10px" @click="searchData()">查询</el-button></el-row>

  <div  id="myChart" style="width:1300px;height:500px;margin:auto;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import {reactive} from "vue";
import {getcalorieList,getusercalorie2} from "@/net"
const form = reactive({
  id:[],
  uuid:'',
  uid:[],
  calorie:[],
  day:[],
  suggestion:[],
  tableData: [],
  name:['breakfast', 'lunch', 'dinner', 'supper', 'snacks']
})
// onMounted(async () => { // 需要在页面加载完毕后展示图表，这里使用Vue3的组合式生命周期钩子 onMounted()10.6.248.202
//
//   form.tableData = (await getusercalorie()).data
//   form.calorie=(await getcalorieList()).data
//   form.id = form.tableData.map(element => element.id);
//   form.uid = form.tableData.map(element => element.uid);
//   form.name=form.uid;
//   form.calorie = form.tableData.map(element => element.calorie);
//   form.day = form.tableData.map(element => element.day);
//   form.suggestion = form.tableData.map(element => element.suggestion);
//   console.log(form.id);
//   console.log( form.uid);
//   console.log( form.calorie);
//   console.log( form.day);
//   console.log( form.suggestion);
//   let myChart = echarts.init(document.getElementById("myChart"));
// // 设置图表配置项,可以直接从Echarts的示例中，将配置项复制下来后放入下列的myChart.setOption()中实现图表的样式更换
//   myChart.setOption({
//     title: {
//       text: '一周热量消耗'
//     },
//     tooltip: {
//       trigger: 'axis',
//       axisPointer: {
//         type: 'cross',
//         label: {
//           backgroundColor: '#6a7985'
//         }
//       }
//     },
//     legend: {
//       data: form.id
//     },
//     toolbox: {
//       feature: {
//         saveAsImage: {}
//       }
//     },
//     grid: {
//       left: '3%',
//       right: '4%',
//       bottom: '3%',
//       containLabel: true
//     },
//     xAxis: [
//       {
//         type: 'category',
//         boundaryGap: false,
//         data: form.day
//       }
//     ],
//     yAxis: [
//       {
//         type: 'value'
//       }
//     ],
//     series: [
//       {
//         name:form.id[0],
//         type: 'line',
//         stack: 'Total',
//         areaStyle: {},
//         emphasis: {
//           focus: 'series'
//         },
//         data: form.calorie
//       }
//
//     ]
//   });
//
//   window.onresize = function () { // 自适应大小
//     myChart.resize();
//   };
// })
const searchData = async () => {
  let a=form.uuid// 需要在页面加载完毕后展示图表，这里使用Vue3的组合式生命周期钩子 onMounted()10.6.248.202
  form.tableData = (await getusercalorie2({a})).data
  // form.calorie=(await getcalorieList()).data
  form.id = form.tableData.map(element => element.id);
  console.log(  form.calorie)
  form.name=form.uid;
  form.calorie = form.tableData.map(element => element.calorie);
  form.day = form.tableData.map(element => element.day);
  console.log( form.uid);
  console.log( form.day);
  let myChart = echarts.init(document.getElementById("myChart"));
// 设置图表配置项,可以直接从Echarts的示例中，将配置项复制下来后放入下列的myChart.setOption()中实现图表的样式更换
  myChart.setOption({
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: form.id
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: form.day
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name:form.uid[0],
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: form.calorie
      }

    ]
  });

  window.onresize = function () { // 自适应大小
    myChart.resize();
  };

}
</script>

